<template>
	<!-- 标题 -->
	<cz-title></cz-title>

	<!-- 轮播 -->
	<van-swipe :autoplay="3000" indicator-color="white">
		<van-swipe-item v-for="item in bannerList">
			<van-image width="100%" height="200" :src="item.url" />
		</van-swipe-item>
	</van-swipe>

	<!-- 分类宫格 -->
	<van-grid :column-num="4">
		<van-grid-item v-for="(item, index) in categoryList" :key="index" :icon="item.url" :text="item.name" />
	</van-grid>

	<!-- 商品分类 -->
	<van-list>
		<van-card
		    v-for="good in goodsList"
			:key="good.id"
			:num="good.num"
			:price="good.price"
			:desc="good.name"
			:title="good.name"
			:thumb="good.url"
		/>
	</van-list>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios' //引入axios
import CzTitle from '@/components/CzTitle.vue'
const bannerList = ref([]) //轮播列表
const categoryList = ref([]) //商品分类列表
const goodsList = ref([]) //商品列表

//使用axios  promise
const getBanner = () => {
	axios({
		url: 'http://localhost:3000/banners',
		method: 'GET',
	}).then(res => {
		const data = res.data
		bannerList.value = data.list
	})
}

/**
 * 商品分类
 */
const getCategory = () => {
	axios({
		url: 'http://localhost:3000/categorys',
		method: 'GET',
	}).then(res => {
		// res ：response
		const data = res.data // 服务端响应的数据
		if (data.code == 1) {
			categoryList.value = data.list
		}
	})
}

/**
 * 商品列表
 */
const getGoodsList = ()=>{
	axios({
		url:'http://localhost:3000/goods',
		method:'GET'
	}).then(res=>{
		const data = res.data // 服务端响应数据
		if(data.code == 1){
			goodsList.value = data.list
		}
	})
}

/**
 * 组件挂载生命周期
 */
onMounted(() => {
	getBanner()
	getCategory()
	getGoodsList()
})
</script>

<style lang="css" scoped></style>
